<template>
  <div class="bigbox">
    <div class="topbox">
      <el-form ref="form" :model="form" label-position="left" label-width="80px">
          <el-row :gutter="20">
              <el-col :span="5">
                <el-form-item label="建筑群">
                  <FilterSelect2
                    v-model="form.buildingId"
                    :optionlist="qiyelist"
                    @updateModelValue="changeqiye"
                    :valuekey="{ name: 'name', value: 'id' }"
                  ></FilterSelect2>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item label="客户">
                  <FilterSelect2
                    v-model="form.customerId"
                    :optionlist="yonghulist"
                    :valuekey="{ name: 'customerName', value: 'id' }"
                  ></FilterSelect2>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="发送时间">
                  <el-date-picker
                    v-model="monthvalue"
                    style="width: 100%;"
                    type="daterange"
                    size="small"
                    value-format="yyyy-MM-dd"
                    range-separator="-"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="8" style="text-align: right;">
                <el-form-item label="" >
                  <el-button size="small" @click="chongzhi">重 置</el-button>
                  <el-button type="primary" size="small" @click="gettablelist()">查 询</el-button>
                </el-form-item>
              </el-col>
          </el-row>
      </el-form>
    </div>
    <div class="forbox">
      <div class="littlebox">
        <div class="nei">
          <div>
            <img src="../../../../assets/Prepaid/md-poll 1@1x.png" alt="">
          </div>
          <div>
            <div class="number">{{ entity.sendCount }}</div>
            <div class="text">发送总数(条)</div>
          </div>
        </div>
      </div>
      <div class="littlebox">
        <div class="nei">
          <div>
            <img src="../../../../assets/Prepaid/iconPark-inbox-success-r@1x.png" alt="">
          </div>
          <div>
            <div class="number blue">{{ entity.successCount }}</div>
            <div class="text">发送成功数(条)</div>
          </div>
        </div>
      </div>
      <div class="littlebox">
        <div class="nei">
          <div>
            <img src="../../../../assets/Prepaid/iconPark-message-failed@1x.png" alt="">
          </div>
          <div>
            <div class="number red">{{ entity.failureCount }}</div>
            <div class="text">发送失败数(条)</div>
          </div>
        </div>
      </div>
      <div class="littlebox">
        <div class="nei">
          <div>
            <img src="../../../../assets/Prepaid/iconPark-speed 1@1x.png" alt="">
          </div>
          <div>
            <div class="number">{{ entity.successRate }}</div>
            <div class="text">发送成功率</div>
          </div>
        </div>
      </div>
    </div>
    <div class="table">
      <div class="filter">
        <span class="text">关键字</span>
        <span>
          <el-input v-model="form.keyword" placeholder="请输入关键字过滤" style="width: 200px;" size="small"></el-input>
        </span>
        <span class="text">状态</span>
        <span>
          <el-select size="small" v-model="form.sendStatus">
            <el-option label="全部" value=" " class="option"></el-option>
            <el-option label="成功" value="1" class="option"></el-option>
            <el-option label="失败" value="0" class="option"></el-option>
          </el-select>
        </span>
         <span><el-button type="primary" size="small" @click="gettablelist()">过 滤</el-button></span>
      </div>
      <div class="elcoun">
        <TableColumn
        ref="table"
        :tableData="tableData"
         :tableConfig="tableConfig">
       <el-table-column
         align="center"
         prop="sendStatus"
         label="发送状态" >
         <template #default="{row}">
              <span v-if="row.sendStatus=='成功'" class="states green"></span>
              <span v-else class="states red"></span>
              <span>{{ row.sendStatus}}</span>
            </template>
       </el-table-column>
      </TableColumn>
      </div>
        <!-- 底部分页 -->
        <div class="fenye">
          <el-pagination
                background
                layout="prev, pager, next"
                :current-page.sync="pageobj.pageNo"
                :page-size="20"
                @current-change="gettablelist"
                :total="+totalCount">
          </el-pagination>
        </div>
    </div>
  </div>
</template>

<script>
import { getloginlistapi } from '@/api/prwpaid/file-management/Architectural-complex'
import { gettablelistapi } from '@/api/prwpaid/user-manage/OpenAaccount'
import {getsmslistapi} from '@/api/prwpaid/real-time-monitor/sms-logs'
import  TableColumn  from '@/components/Table/index.vue';
export default {
  name: 'CallPoliceIndex',
  components: {
    TableColumn
 },
  data() {
    return {
      form:{buildingId:'',customerId:'',keyword:'',sendStatus:''},
      monthvalue: ['',''],
      yonghulist: [],
      qiyelist:[],
      tableData: [],
      tableConfig: [
        { label: '序号', type: 'index', width: '70', center: 'center' },
        { label: '客户', prop: 'customerName' },
        { label: '手机号', prop: 'mobileNumber' },
        { label: '发送内容', prop: 'sendContent',width:'500' },
        { label: '发送时间', prop: 'sendTime' ,center:'center'},
        { label: '失败原因',prop:'failureReason'},
      ],
      pageobj: {
        pageNo: 1,
        pageSize:20
      },
      totalCount: '',
      entity:{}
    };
  },

  async mounted() {
            // 获取建筑群
  const res = await getloginlistapi()
    this.qiyelist = res.data.list
    const localbuildingId = localStorage.getItem('buildingId')
    const isBuildIdInArray = this.qiyelist.some(item => item.id == localbuildingId);
    if(isBuildIdInArray){
      this.form.buildingId = localbuildingId ? localbuildingId : ''
      this.getyonghuxialalist(this.form.buildingId)
    }else{
      this.form.buildingId= ''
    }


    this.gettablelist()
  },

  methods: {
    // 企业下拉
    changeqiye(val) {
      localStorage.setItem('buildingId', val)
      this.getyonghuxialalist(val)
    },
    // 获取用户
    async getyonghuxialalist(val) {
    const ress = await gettablelistapi({
        pageNo: 0, pageSize: 500,
      startDate: '', endDate: '', 
      state:'20',buildingId:val,customerType:''
    })
    this.yonghulist = ress.data.list
    },
    // 重置
    chongzhi() {
      localStorage.removeItem('buildingId');
      this.form.customerId = ''
      this.form.buildingId = ''
      this.monthvalue = ['', '']
      this.gettablelist()
    },
    // 获取表格数据
    async gettablelist() {
      this.$refs.table.loading=true
      const {data:{entity,totalCount}} = await getsmslistapi({pageNo: this.pageobj.pageNo - 1,...this.form,
        pageSize: this.pageobj.pageSize,startDate:this.monthvalue[0],endDate:this.monthvalue[1]})
      this.tableData = entity.messageList
      this.totalCount = totalCount
      this.entity=entity
      this.$refs.table.loading=false
    },
  },
};
</script>

<style lang="scss" scoped>
.option{
  padding-left: 10px;
}
.bigbox{
  height: 100%;
  padding: 10px;
  .topbox{
    height: 80px;
    background-color: #fff;
    padding: 20px;
    margin-bottom: 10px;
  }
  .forbox{
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    .littlebox{
      width: 24.5%;
      height: 120px;
      background-color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      .nei{
        display: flex;
      text-align: center;
        line-height: 40px;
        font-size: 14px;
        .number{
          font-size: 22px;
          font-weight: 600;
        }
        .blue{
          color: #1a90fe;
        }
        .red{
          color: red;
        }
      }
    }
  }
  .table{
    height: calc(100% - 220px);
    background-color: #fff;
    padding: 20px;
    .filter{
     text-align: right;
     margin: 3px 0;
     .text{
        font-size: 14px;
        color: #606266;
      }
     span{
      margin-left: 15px;
     }
    }
    .elcoun{
     margin-top: 10px;
     height: 85%;
     .states{
        display: inline-block;
        width: 10px;
        height: 10px;
        margin-right: 10px;
        border-radius: 50%;
      }
      .red{
        background-color:red;
      }
      .green{
        background-color: #13ce66;
      }
    }
    .fenye{
      text-align: right;
      margin-top: 10px;
    }
  }
}
</style>